Ext.define('Seq.widget.WidgetC', {
    extend: 'Seq.widget.Widget',
    xtype: 'widget-c',

    cls: 'info-card-c',

    config: {
        textWidth: 120,
        unitWidth: 60
    },

    minWidth: 200,
    minHeight: 28,
    layout: {
        type: 'hbox',
        align: 'middle'
    },

    items: [{
        xtype: 'component',
        cls: 'text',
        html: '',
        width: 120
    }, {
        xtype: 'component',
        cls: 'value',
        html: '',
        flex: 1
    }, {
        xtype: 'component',
        cls: 'unit',
        html: '',
        width: 60
    }],

    setText(value) {
        this.items[0].html = value;
    },

    setTextWidth: function (value) {
        this.items[0].width = value;
    },

    val2div: function (color, value) {
        let me = this;
        return Ext.String.format('<div class="fa-{0}">{1}</div>', me.colorOfValue(color, value), value);
    },

    setValue(value) {
        let me = this;
        if (me.items.items) {
            me.callParent(arguments);
            let data = me.getData();
            me.items.items[1].setHtml(me.val2div(data.color || me.config.color, data.value));
        } else {
            me.items[1].html = me.val2div(me.config.color, value);
        }
    },

    setColor(value) {
        let me = this;
        if (me.items.items) {
            me.callParent(arguments);
            me.items.items[1].setHtml(me.val2div(value, me.getData().value));
        } else {
            me.items[1].html = me.val2div(value, me.config.value);
        }
    },

    setUnit(value) {
        let me = this;
        if (me.items.items) {
            me.items.items[2].setHtml(value);
        } else {
            me.items[2].html = value;
        }
    },

    setUnitWidth: function (value) {
        this.items[2].width = value;
    }

});
